import { View } from '@tarojs/components';
import {
  CommentOutlined,
  Cross,
  GoodJobOutlined,
  ShareOutlined,
} from '@taroify/icons';
import { ArticleCardType } from '@/types';
import UserTag from '@/components/user/UserTag';
import { RenderMultilineImage, RenderMultilineText } from '@/utils/render';
import { useCustomTheme } from '@/context/ThemeContext';
import { useState } from 'react';
import Taro from '@tarojs/taro';
import Share from '../common/Share';

export default ({ user, article }: ArticleCardType) => {
  const close = () => {};
  const { theme } = useCustomTheme();
  const [show, setShow] = useState(false);

  return (
    <View
      className="p-3 rounded-lg"
      style={{ backgroundColor: theme.backgroundColor }}
    >
      <View className="flex justify-between items-center">
        <UserTag
          size="medium"
          data={user}
          right={<Cross color="#CDCCD1" size="20" onClick={close} />}
        />
      </View>
      <View
        onClick={() =>
          Taro.navigateTo({ url: '/pages/article/article?id=' + article.kid })
        }
      >
        <View className="my-2">{RenderMultilineText(article.context)}</View>
        {article.typeFlag == '2' ? (
          <View className="text-center h-72 w-10/12 rounded-2xl bg-red-600">
            视频占位
          </View>
        ) : (
          <RenderMultilineImage images={article.contextUrl ?? ''} />
        )}
        <View className="mt-2 flex justify-around items-center">
          <View className="flex items-center gap-1 justify-center">
            <GoodJobOutlined size={24} />3
          </View>
          <View className="flex items-center gap-1 justify-center">
            <CommentOutlined size={24} />
            74
          </View>
          <View
            onClick={() => setShow(true)}
            className="flex items-center gap- justify-center"
          >
            <ShareOutlined size={24} />
            分享
            <Share show={show} change={setShow} />
          </View>
        </View>
      </View>
    </View>
  );
};
